<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>拖拽接口使用_2</title>

    <style>
        #onediv {
            width: 200px;
            height: 200px;
            border-width: 1px;
            border-color: aqua;
            border-style: solid;
            float: left;
        }

        #twodiv {
            width: 200px;
            height: 200px;
            border-width: 1px;
            border-color: red;
            border-style: solid;
            float: left;
            margin-left: 10px;
        }

        #oneP {
            margin: auto;
            display: block;
            width: 60%;
            text-align: center;
        }

    </style>
</head>
<body>


<div id="onediv">
    <p id="oneP" draggable="true">鼠标拖拽我试试</p>
</div>


<div id="twodiv">

    <script>

        var oneP = document.querySelector("#oneP");
        var twodiv = document.querySelector("#twodiv");
        var onediv = document.querySelector("#onediv");

        oneP.ondragstart = function (event) {
            event.dataTransfer.setData("Text", event.target.id);
        }




        // 浏览器默认会阻止这个事件
        twodiv.ondrop = function (event) {
            var data = event.dataTransfer.getData("Text");
            event.target.appendChild(document.getElementById(data));
        }

        twodiv.ondragover = function (event) {
            event.preventDefault();
        }



        onediv.ondrop = function (event) {
            var data = event.dataTransfer.getData("Text");
            event.target.appendChild(document.getElementById(data));
        }
        onediv.ondragover = function (event) {
            event.preventDefault();
        }


    </script>

</body>
</html>
